<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page import="com.yaodian100.core.common.utils.ServerValue"%>
<c-rt:set var="midContextPath" value='<%=ServerValue.getMidContextPath() %>'/>
<c-rt:set var="midHostname" value='<%=ServerValue.getMidHostname()%>'/>
<!-- 月历 -->
<script type="text/javascript" charset="UTF-8" src="/js/jquery.datepick.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.datepick-zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="/css/smoothness.datepick.css" />
<!-- 数字验证 -->
<script type="text/javascript" charset="UTF-8" src="/js/jquery.alphanumeric.js"></script>
<!-- FLASH -->
<script type="text/javascript" charset="UTF-8" src="/js/jquery.flash.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/yaodian100.common.js"></script>
<script language="javascript">
	$().ready( function() {
		$(":input[name*='ProdId']").each(function(){
			$("#" + this.id).numeric();
			$(this).blur(function(){
				$(this).val(prodPadLeft($(this).val()));
				getProductInfo("${midContextPath}",this.id + "_ProdName",$(this).val());
			});
		});
		$('#startDate').datepick({minDate: new Date(), showOn:'both',numberOfMonths:2, buttonImageOnly: true, buttonImage: '/images/calendar.gif',dateFormat:"yy-mm-dd"}); 
		$('#endDate').datepick({minDate: new Date(),showOn: 'both',numberOfMonths:2, buttonImageOnly: true, buttonImage: '/images/calendar.gif',dateFormat:"yy-mm-dd"});
		$('#childCate').hide();
		
		$("#advType").change(function(){
			if ( $(this).val() == "100_MAINGOLD" ){
				$('#childCate').show();
				initLevel();
			}else{
				$('#childCate').hide();
			}
		});
		
		initLevel();
		
		$(":input[name*='LayoutType']").each(function(){
			if ( this.value == "IMGTEXT" )
				$("#tab" + this.id.substring(3,4) + "Text").css("display","block");
			else
				$("#tab" + this.id.substring(3,4) + "Text").css("display","none");

			if ( this.value == 'FLASH'){
				$("#objId" + this.id.substring(3,4)).flash(
	        { src: "${midHostname}/eventImg/" + $("#tab" + this.id.substring(3,4) + "ImgFolder").val() + "/" + $("#advType").val() + "/" + $("#tab" + this.id.substring(3,4) + "MainImgName").val(),
	          width: 470,
	          height: 210 },
	        { version: 8 }
				);
			}else{
				$("#objId" + this.id.substring(3,4)).html("<img src='${midHostname}/eventImg/" + $("#tab" + this.id.substring(3,4) + "ImgFolder").val() + "/" + $("#advType").val() + "/" + $("#tab" + this.id.substring(3,4) + "MainImgName").val() + "' width='75' height='75'/><br/>");
			}
		});
		
		$(":input[name*='LayoutType']").change(function(){
			if ( this.value == "IMGTEXT" )
				$("#tab" + this.id.substring(3,4) + "Text").css("display","block");
			else{
				$("#tab" + this.id.substring(3,4) + "Text").css("display","none");
			}
		});
			
		$("#mainCateId").change(function(){
			initLevel();
		});
		
		$("#subBtn").click(function(){
			if ( validate_data() ){
				$("#advStatus").val("10");
				$("#mainGoldAdvForm").submit();
			}
		});

		$("#draftBtn").click(function(){
			if ( validate_data() ){
				$("#advStatus").val("00");
				$("#mainGoldAdvForm").submit();
			}
		});
		
		$("#canBtn").click(function(){
			if ( validate_data() ){
				$("#advStatus").val("90");
				$("#mainGoldAdvForm").submit();
			}
		});
	});

	function initLevel(){
		if ( $("#advType").val() == "100_MAINGOLD" ){
			$("#mainCate").val("${mainCateId}");
			$('#childCate').show();
			var childCateIds = "<option value=''>====== 请选择  ======</option>";
			$.getJSON("${midContextPath}/category/getProductCategory.do?type=json",
					{categoryid:$("#mainCateId").val()},
					function(categories){
						for(var i = 0 ; i < categories.length; i++ ){
							if ( "${childCateId}" == categories[i].id )
								childCateIds = childCateIds + "<option value='" + categories[i].id + "' selected='selected'>" + categories[i].name + "</option>";
							else
								childCateIds = childCateIds + "<option value='" + categories[i].id + "'>" + categories[i].name + "</option>";
						}
						$("#childCateId").html(childCateIds);
					});
		}else{
			$("#childCateId").find('option').remove().end();
		}
	}
	
	function validate_data(){
		if ( $("#advName").val() == "" ){
			alert("请输入广告名称");
			$("#advName").focus();
			return false;
		}
		if ( $("#startDate").val() == ""){
			alert("请输入起始时间");
			$("#startDate").focus();
			return false;
		}

		if( $("#endDate").val() == "" ){
			alert("请输入结束时间");
			$("#endDate").focus();
			return false;
		}
		for( var i = 1; i <= 5; i++ ){
			if ( $("#tab" + i + "Title").val() == "" ){
				alert("请输入tab" + i + " Tab 标题文字");
				$("#tab" + i + "Title").focus();
				return false;
			}
			if ( $("#advId").val() == "" ){
				if ( $("#tab" + i + "MainImg").val() == "" ){
					alert("请输入tab" + i + " 黄金促销大图");
					$("#tab" + i + "MainImg").focus();
					return false;
				}
			}
			if ( $("#tab" + i + "MainImgLink").val() == "" ){
				alert("请输入tab" + i + " 图片点击连结");
				$("#tab" + i + "MainImgLink").focus();
				return false;
			}
			if ( !isURL($("#tab" + i + "MainImgLink").val()) ){
				alert("tab" + i + " 图片点击连结格式错误");
				$("#tab" + i + "MainImgLink").focus();
				return false;
			}
			if ( $("#tab" + i + "LayoutType").val() == "IMGTEXT" ){
				if ( $("#tab" + i + "MainPromotion").val() == "" ){
					alert("請輸入tab" + i + " 黄金促销主标");
					$("#tab" + i + "MainPromotion").focus();
					return false;
				}
				if ( $("#tab" + i + "SecondPromotion").val() == "" ){
					alert("請輸入tab" + i + " 黄金促销次标");
					$("#tab" + i + "SecondPromotion").focus();
					return false;
				}
				if ( $("#tab" + i + "ProdId1").val() == "" ){
					alert("請輸入tab" + i + "促销商品一");
					$("#advName").focus();
					return false;
				}
				if ( $("#tab" + i + "ProdId2").val() == "" ){
					alert("請輸入tab" + i + "促銷商品二");
					$("#tab" + i + "ProdId2").focus();
					return false;
				}
			}
		}
		if ( $("#advType").val() == "100_MAINGOLD"){
			if ( $("#childCateId").val() == "" ){
				alert("请选次分类");
				$("#childCateId").focus();
				return false;
			}
		}
		if ( $("#tab1MainImg").val() != "" )
			$("#tab1MainImgName").val($("#tab1MainImg").val());

		if ( $("#tab2MainImg").val() != "" )
			$("#tab2MainImgName").val($("#tab2MainImg").val());

		if ( $("#tab3MainImg").val() != "" )
			$("#tab3MainImgName").val($("#tab3MainImg").val());

		if ( $("#tab4MainImg").val() != "" )
			$("#tab4MainImgName").val($("#tab4MainImg").val());

		if ( $("#tab5MainImg").val() != "" )
			$("#tab5MainImgName").val($("#tab5MainImg").val());

		return true;
	}
</script>
<s:actionerror />
<s:actionmessage />
<s:fielderror />
<h1>广告管理</h1>
<s:form action="mainGold/saveMainGoldAdv.do" method="post" name="mainGoldAdvForm" id="mainGoldAdvForm" enctype="multipart/form-data">
	<table class="tb-data" width="100%">
		<tbody>
			<tr>
				<th>类型</th>
				<td>
					<c-rt:if test="${advType eq '000_MAINGOLD'}">馆首页大看版广告</c-rt:if>
					<c-rt:if test="${advType eq '100_MAINGOLD'}">分类页大看版广告</c-rt:if>
					<input type="hidden" id="advType" name="advType" value="${advType}"/>
			</tr>
			<tr>
				<th>广告名称</th>
				<td><input type="text" id="advName" name="advName" value="${advName}" size="30" maxlength="30"/></td>
			</tr>
			<tr>
				<th>馆别</th>
				<td>
					<div id="mainCate">
					<select id="mainCateId" name="mainCateId">
						<option value="">====== 请选择  ======</option>
						<c-rt:forEach items="${categoryRoot}" var="category">
							<option value="${category.id}" ${mainCateId eq category.id ? "selected" : ""}>${category.name}</option>
						</c-rt:forEach>
					</select>
					</div>
					<div id="childCate">
						<select id="childCateId" name="childCateId">
							<option value="">====== 请选择  ======</option>
						</select>
					</div>
				</td>
			</tr>
			<tr>
				<th>起迄时间</th>
				<td>
				<input type="text" id="startDate" name="startDate" value="${startDate}" maxlength="10"/> ~ 
				<input type="text" id="endDate" name="endDate" value="${endDate}" maxlength="10"/>
				</td>
			</tr>
			<tr>
				<th colspan="4">tab设定</th>
			</tr>
			<tr>
				<th>Tab1</th>
				<td>
					<div id="objId1"></div>
					<b>看版内容型态:</b>
					<select name="tab1LayoutType" id="tab1LayoutType">
						<option value="IMG" ${tab1LayoutType eq 'IMG' ? 'selected' : '' }>图(470X210)</option>
						<option value="IMGTEXT" ${tab1LayoutType eq 'IMGTEXT' ? 'selected' : '' }>图文(260x190)</option>
						<option value="FLASH" ${tab1LayoutType eq 'FLASH' ? 'selected' : '' }>FLASH(470x210)</option>
					</select><br/>
					<b>Tab 标题文字:</b><input type="text" name="tab1Title" maxlength="4" size="8" id="tab1Title" value="${tab1Title}"/><span class="txt-rd">字数限制:4个中文字</span><br/>
					<b>黄金促销大图:</b><s:file id="tab1MainImg" name="tab1MainImg" value="" size="60" ></s:file><br/>
					<b>图片点击连结:</b><input type="text" name="tab1MainImgLink" id="tab1MainImgLink" value="${tab1MainImgLink}" size="60"/><br/><span class="txt-rd">ex:http://www.yaodian100.com</span><br/>
					<input type="hidden" id="tab1MainImgName" name="tab1MainImgName" value="${tab1MainImgName}"/><br/>
					<input type="hidden" id="tab1ImgFolder" name="tab1ImgFolder" value="${tab1ImgFolder}"/>
					<div id="tab1Text" style="display:none;">
						<b>黄金促销主标:</b><input type="text" name="tab1MainPromotion" maxlength="20" size="30" id="tab1MainPromotion" value="${tab1MainPromotion}"/><span class="txt-rd">字数限制:20个中文字</span><br/>
						<b>黄金促销次标:</b><input type="text" name="tab1SecondPromotion" maxlength="28" size="40" id="tab1SecondPromotion" value="${tab1SecondPromotion}"/><span class="txt-rd">字数限制:28个中文字</span><br/>
						<b>促销商品一:</b><input type="text" name="tab1ProdId1" id="tab1ProdId1" maxlength="8" value="${tab1ProdId1}"/>（请输入商品编号）<span id="tab1ProdId1_ProdName"></span><br/>
						<b>促銷商品二:</b><input type="text" name="tab1ProdId2" id="tab1ProdId2" maxlength="8" value="${tab1ProdId2}"/>（请输入商品编号）<span id="tab1ProdId2_ProdName"></span><br/>
					</div>
				</td>
			</tr>
			<tr>
				<th>Tab2</th>
				<td>
					<div id="objId2"></div>
					<b>看版内容型态:</b>
					<select name="tab2LayoutType" id="tab2LayoutType">
						<option value="IMG" ${tab2LayoutType eq 'IMG' ? 'selected' : '' }>图(470X210)</option>
						<option value="IMGTEXT" ${tab2LayoutType eq 'IMGTEXT' ? 'selected' : '' }>图文(260x190)</option>
						<option value="FLASH" ${tab2LayoutType eq 'FLASH' ? 'selected' : '' }>FLASH(470x210)</option>
					</select><br/>
					<b>Tab 标题文字:</b><input type="text" name="tab2Title" maxlength="4" size="8" id="tab2Title" value="${tab2Title}"/><span class="txt-rd">字数限制:4个中文字</span><br/>
					<b>黄金促销大图:</b><s:file id="tab2MainImg" name="tab2MainImg" value="" size="60" ></s:file><br/>
					<b>图片点击连结:</b><input type="text" name="tab2MainImgLink" id="tab2MainImgLink" value="${tab2MainImgLink}" size="60"/><br/><span class="txt-rd">ex:http://www.yaodian100.com</span><br/>
					<input type="hidden" id="tab2MainImgName" name="tab2MainImgName" value="${tab2MainImgName}"/>
					<input type="hidden" id="tab2ImgFolder" name="tab2ImgFolder" value="${tab2ImgFolder}"/><br/>
					<div id="tab2Text" style="display:none;">
						<b>黄金促销主标:</b><input type="text" name="tab2MainPromotion" maxlength="20" size="30" id="tab2MainPromotion" value="${tab2MainPromotion}"/><span class="txt-rd">字数限制:20个中文字</span><br/>
						<b>黄金促销次标:</b><input type="text" name="tab2SecondPromotion" maxlength="28" size="40" id="tab2SecondPromotion" value="${tab2SecondPromotion}"/><span class="txt-rd">字数限制:28个中文字</span><br/>
						<b>促销商品一:</b><input type="text" name="tab2ProdId1" id="tab2ProdId1" maxlength="8" value="${tab2ProdId1}"/>（请输入商品编号）<span id="tab2ProdId1_ProdName"></span><br/>
						<b>促銷商品二:</b><input type="text" name="tab2ProdId2" id="tab2ProdId2" maxlength="8" value="${tab2ProdId2}"/>（请输入商品编号）<span id="tab2ProdId2_ProdName"></span><br/>
					</div>
				</td>
			</tr>	
			<tr>
				<th>Tab3</th>
				<td>
					<div id="objId3"></div>
					<b>看版内容型态:</b>
					<select name="tab3LayoutType" id="tab3LayoutType">
						<option value="IMG" ${tab3LayoutType eq 'IMG' ? 'selected' : '' }>图(470X210)</option>
						<option value="IMGTEXT" ${tab3LayoutType eq 'IMGTEXT' ? 'selected' : '' }>图文(260x190)</option>
						<option value="FLASH" ${tab3LayoutType eq 'FLASH' ? 'selected' : '' }>FLASH(470x210)</option>
					</select><br/>
					<b>Tab 标题文字:</b><input type="text" name="tab3Title" maxlength="4" size="8" id="tab3Title" value="${tab3Title}"/><span class="txt-rd">字数限制:4个中文字</span><br/>
					<b>黄金促销大图:</b><s:file id="tab3MainImg" name="tab3MainImg" value="" size="60" ></s:file><br/>
					<b>图片点击连结:</b><input type="text" name="tab3MainImgLink" id="tab3MainImgLink" value="${tab3MainImgLink}" size="60"/><br/><span class="txt-rd">ex:http://www.yaodian100.com</span><br/>
					<input type="hidden" id="tab3MainImgName" name="tab3MainImgName" value="${tab3MainImgName}"/>
					<input type="hidden" id="tab3ImgFolder" name="tab3ImgFolder" value="${tab3ImgFolder}"/><br/>
					<div id="tab3Text" style="display:none;">
						<b>黄金促销主标:</b><input type="text" name="tab3MainPromotion" maxlength="20" size="30" id="tab3MainPromotion" value="${tab3MainPromotion}"/><span class="txt-rd">字数限制:20个中文字</span><br/>
						<b>黄金促销次标:</b><input type="text" name="tab3SecondPromotion" maxlength="28" size="40" id="tab3SecondPromotion" value="${tab3SecondPromotion}"/><span class="txt-rd">字数限制:28个中文字</span><br/>
						<b>促销商品一:</b><input type="text" name="tab3ProdId1" id="tab3ProdId1" maxlength="8" value="${tab3ProdId1}"/>（请输入商品编号）<span id="tab3ProdId1_ProdName"></span><br/>
						<b>促銷商品二:</b><input type="text" name="tab3ProdId2" id="tab3ProdId2" maxlength="8" value="${tab3ProdId2}"/>（请输入商品编号）<span id="tab3ProdId2_ProdName"></span><br/>
					</div>
				</td>
			</tr>
			<tr>
				<th>Tab4</th>
				<td>
					<div id="objId4"></div>
					<b>看版内容型态:</b>
					<select name="tab4LayoutType" id="tab4LayoutType">
						<option value="IMG" ${tab4LayoutType eq 'IMG' ? 'selected' : '' }>图(470X210)</option>
						<option value="IMGTEXT" ${tab4LayoutType eq 'IMGTEXT' ? 'selected' : '' }>图文(260x190)</option>
						<option value="FLASH" ${tab4LayoutType eq 'FLASH' ? 'selected' : '' }>FLASH(470x210)</option>
					</select><br/>
					<b>Tab 标题文字:</b><input type="text" name="tab4Title" maxlength="4" size="8" id="tab4Title" value="${tab4Title}"/><span class="txt-rd">字数限制:4个中文字</span><br/>
					<b>黄金促销大图:</b><s:file id="tab4MainImg" name="tab4MainImg" value="" size="60" ></s:file><br/>
					<b>图片点击连结:</b><input type="text" name="tab4MainImgLink" id="tab4MainImgLink" value="${tab4MainImgLink}" size="60"/><br/><span class="txt-rd">ex:http://www.yaodian100.com</span><br/>
					<input type="hidden" id="tab4MainImgName" name="tab4MainImgName" value="${tab4MainImgName}"/>
					<input type="hidden" id="tab4ImgFolder" name="tab4ImgFolder" value="${tab4ImgFolder}"/><br/>
					<div id="tab4Text" style="display:none;">
						<b>黄金促销主标:</b><input type="text" name="tab4MainPromotion" maxlength="20" size="30" id="tab4MainPromotion" value="${tab4MainPromotion}"/><span class="txt-rd">字数限制:20个中文字</span><br/>
						<b>黄金促销次标:</b><input type="text" name="tab4SecondPromotion" maxlength="28" size="40" id="tab4SecondPromotion" value="${tab4SecondPromotion}"/><span class="txt-rd">字数限制:28个中文字</span><br/>
						<b>促销商品一:</b><input type="text" name="tab4ProdId1" id="tab4ProdId1" maxlength="8" value="${tab4ProdId1}"/>（请输入商品编号）<span id="tab4ProdId1_ProdName"></span><br/>
						<b>促銷商品二:</b><input type="text" name="tab4ProdId2" id="tab4ProdId2" maxlength="8" value="${tab4ProdId2}"/>（请输入商品编号）<span id="tab4ProdId2_ProdName"></span><br/>
					</div>
				</td>
			</tr>
			<tr>
				<th>Tab5</th>
				<td>
					<div id="objId5"></div>
					<b>看版内容型态:</b>
					<select name="tab5LayoutType" id="tab5LayoutType">
						<option value="IMG" ${tab5LayoutType eq 'IMG' ? 'selected' : '' }>图(470X210)</option>
						<option value="IMGTEXT" ${tab5LayoutType eq 'IMGTEXT' ? 'selected' : '' }>图文(260x190)</option>
						<option value="FLASH" ${tab5LayoutType eq 'FLASH' ? 'selected' : '' }>FLASH(470x210)</option>
					</select><br/>
					<b>Tab 标题文字:</b><input type="text" name="tab5Title" maxlength="4" size="8" id="tab5Title" value="${tab5Title}"/><span class="txt-rd">字数限制:4个中文字</span><br/>
					<b>黄金促销大图:</b><s:file id="tab5MainImg" name="tab5MainImg" value="" size="60" ></s:file><br/>
					<b>图片点击连结:</b><input type="text" name="tab5MainImgLink" id="tab5MainImgLink" value="${tab5MainImgLink}" size="60"/><br/><span class="txt-rd">ex:http://www.yaodian100.com</span><br/>
					<input type="hidden" id="tab5MainImgName" name="tab5MainImgName" value="${tab5MainImgName}"/>
					<input type="hidden" id="tab5ImgFolder" name="tab5ImgFolder" value="${tab5ImgFolder}"/><br/>
					<div id="tab5Text" style="display:none;">
						<b>黄金促销主标:</b><input type="text" name="tab5MainPromotion" maxlength="20" size="30" id="tab5MainPromotion" value="${tab5MainPromotion}"/><span class="txt-rd">字数限制:20个中文字</span><br/>
						<b>黄金促销次标:</b><input type="text" name="tab5SecondPromotion" maxlength="28" size="40" id="tab5SecondPromotion" value="${tab5SecondPromotion}"/><span class="txt-rd">字数限制:28个中文字</span><br/>
						<b>促销商品一:</b><input type="text" name="tab5ProdId1" id="tab5ProdId1" maxlength="8" value="${tab5ProdId1}"/>（请输入商品编号）<span id="tab5ProdId1_ProdName"></span><br/>
						<b>促銷商品二:</b><input type="text" name="tab5ProdId2" id="tab5ProdId2" maxlength="8" value="${tab5ProdId2}"/>（请输入商品编号）<span id="tab5ProdId2_ProdName"></span><br/>
					</div>
				</td>
			</tr>																				
			<tr>
				<td colspan="2">
					<input type="hidden" id="advId" name="advId" value="${advId}"/>
					<input type="hidden" id="advStatus" name="advStatus" value="${advStatus}"/>
					<input type="button" id="subBtn" name="subBtn" value="发送"/>
					<input type="button" id="draftBtn" name="draftBtn" value="草稿"/>
					<input type="button" id="canBtn" name="canBtn" value="暂停"/>
				</td>
			</tr>												
		</tbody>
	</table>
</s:form>
<div class="f-link">
	<a href="${midContextPath}/generate/search.do">回广告查询页</a>
</div>